<template>
  <div class="video-item" @click="turnToDetail">
    <div class="item-header">
      <image class="user-avator" :src="video.user_avator" mode="aspectFill"></image>
      <div class="item-info">
        <div class="user-name">{{ video.user_name }}</div>
        <div class="create-time">{{ video.create_time }}</div>
      </div>
      <div class="award-num">
        {{ awardTxt }}
      </div>
    </div>
    <div class="item-content">{{ video.video_content }}</div>
    <div class="item-labels">
      <div class="label">#{{ video.video_label1 }}</div>
      <div class="label">#{{ video.video_label2 }}</div>
    </div>
    <video
      :src="video.video_url"
      class="item-video"
      :controls="isNeedFull"
      loop
      :id="video.video_id"
      :show-fullscreen-btn="props.isNeedFull"
      @click.stop="videoClick(video.video_id)"
    ></video>
    <div class="refuse-reason" v-if="video.refuse_reason && isShowReason">未通过原因: {{ video.refuse_reason }}</div>
  </div>
</template>

<script setup lang="ts">
import { getCurrentInstance, withDefaults } from 'vue';
import { checkIsLogin } from '@/utils/navigate'
import { DEFAULTAVATOR } from '@/common/constantData';
interface VideoProps {
  video: VideoItem,
  isNeedFull: boolean,
  noTurn: boolean,
  isShowReason: boolean
}
const props = withDefaults(defineProps<VideoProps>(), {
  isNeedFull: () => false,
  noTurn: () => false,
  isShowReason: () => false
})
const emits = defineEmits(['videoClick'])
const currentCpn = getCurrentInstance();

/** 点击视频的处理 */
const videoClick = (id: string) => {
  emits('videoClick', {
    id,
    callCpn: currentCpn
  })
}
const turnToDetail = () => {
  // 检查是否登录
  if (!checkIsLogin()) return;
  console.log('props', props);
  // 检查是否能够跳转
  if (props.noTurn) return;
  uni.navigateTo({
    url: `/subpkg/video-detail/video-detail?videoId=${props.video.video_id}&type=${props.video.type}`
  })
}
/** 奖励文字的处理 */
const awardTxt = computed(() => {
  if (props.video.type === '0') {
    return `奖励金：¥${Number(props.video.video_award).toFixed(2)}`
  }
  if (props.video.type === '2') {
    return ''
  }
  return `已获奖励：¥${Number(props.video.video_award).toFixed(2)}`
})
</script>

<style scoped lang="scss">
.video-item {
  width: 100%;
  margin-bottom: 19rpx;
  padding: 23rpx 31rpx;
  box-sizing: border-box;
  background-color: #fff;

  .item-header {
    width: 100%;
    margin-bottom: 23rpx;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    .user-avator {
      width: 77rpx;
      height: 77rpx;
      flex-shrink: 0;
      margin-right: 10rpx;
      border-radius: 50%;
    }
    .item-info {
      flex: 1;
      min-width: 250rpx;
      .user-name {
        font-size: 29rpx;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
      .create-time {
        margin-top: 4rpx;
        color: rgba(51, 51, 51, .8);
        font-size: 25rpx;
        white-space: nowrap;

      }
    }
    .award-num {
      margin-left: 58rpx;
      color: #27ae60;
      flex-shrink: 0;
      font-size: 29rpx;
    }
  }
  .item-content {
    margin-bottom: 8rpx;
    color: #333333;
    font-size: 33rpx;
    word-break: break-all;
  }
  .item-labels {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    color: #ff2459;
    font-size: 29rpx;
    .label {
      margin-right: 15rpx;
      margin-bottom: 19rpx;
      &:last-of-type {
        margin-right: 0;
      }
    }
  }
  .item-video {
    width: 100%;
    height: 396rpx;
    object-fit: contain;
    border-radius: 8rpx;
  }
  .refuse-reason {
    margin-top: 4px;
    font-size: 12px;
  }
}
</style>
